<template>
    <div class="comment-warp">
        <div class="header">评论({{formatNum(total)}})</div>
        <div class="comment-list" v-if="list.length">
            <!-- 评论列表 -->
            <div class="comment" v-for="(comment) in list" :key="comment.id">
                <div class="avatar default" v-if="!comment.createByAvatar">
                    <image class="icon-avatar" src="@/static/mine_default_avatar.png"></image>
                </div>
                <image v-else class="avatar" alt="" :src="comment.createByAvatar"></image>
                <div class="right-info">
                    <div class="main">
                        <div class="user-content" @click.stop="handleReply(comment, comment.id, comment.id)">
                            <div class="user">
                                <text class="name">{{comment.createByName}}</text>
                                <text class="top" v-if="comment.isTop">置顶</text>
                            </div>
                            <div class="content">
                                <text class="text">{{comment.comment}}</text>
                                <text class="time">
                                    {{comment.createTime}}
                                    <text class="reply-btn">回复</text>
                                </text>
                                
                            </div>
                        </div>
                        <div class="star" @click.stop="handleStar(comment)">
                            <image v-show="!comment.isLike" class="icon" src="@/static/icon-star.png"></image>
                            <image v-show="comment.isLike" class="icon" src="@/static/icon-star-active.png"></image>
                            <text class="num">{{formatNum(comment.likes)}}</text>
                        </div>
                    </div>

                    <!-- 回复列表 -->
                    <div class="reply-list" v-if="comment.child.length">
                        <div 
                            class="reply" 
                            v-for="(reply) in comment.child" 
                            :key="reply.id"
                            @click.stop="handleReply(reply, reply.id, reply.topId)"
                        >
                            <div class="avatar default" v-if="!reply.createByAvatar">
                                <image class="icon-avatar" src="@/static/mine_default_avatar.png"></image>
                            </div>
                            <image v-if="reply.createByAvatar" class="avatar" alt="" :src="reply.createByAvatar"></image>
                            <div class="right-info">
                                <div class="main">
                                    <div class="user-content">
                                        <div class="user">
                                            <text class="name">{{reply.createByName}}</text>
                                        </div>
                                        <div class="content">
                                            <text class="text">
                                                <text 
                                                    class="to-name-label" 
                                                    v-if="reply.topId != reply.parentId"
                                                >
                                                    回复 <text class="to-name">{{reply.toName}}:</text>
                                                </text>
                                                {{reply.comment}}
                                            </text>
                                            <text class="time">
                                                {{reply.createTime}}
                                                <text class="reply-btn">回复</text>
                                            </text>
                                            
                                        </div>
                                    </div>
                                    <div class="star" @click.stop="handleStar(reply)">
                                        <image v-show="!reply.isLike" class="icon" src="@/static/icon-star.png"></image>
                                        <image v-show="reply.isLike" class="icon" src="@/static/icon-star-active.png"></image>
                                        <text class="num">{{formatNum(reply.likes)}}</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="load-more" @click="loadMoreReply(comment)" v-if="comment.haveMore">展开更多回复</div>
                    </div>
                    
                </div>
            </div>
            <uni-load-more class="uni-load-more" :status="loadStatus" :contentText="contentText" :iconSize="18"></uni-load-more>
        </div>

        <!-- 空态 -->
        <div class="empty" v-if="!list.length">
            <Empty  text="暂无评论"/>
        </div>
    </div>
</template>

<script>
import Empty from '@/components/no-data.vue'
import {
    apiListSubComment,
    apiLike
} from '@/api/memory'
export default {
    components: {
        Empty
    },
    props: {
        list: { // 评论数据
            default: () => [],
            type: Array
        },
        loadStatus: {
            type: String,
            default: 'more'
        },
        total: { // 评论数
            type: Number | String,
            default: 0
        },
        scene: { // 场景值 判断是否朋友圈打开
            type: Number | String,
            default: ''
        }
    },
    data() {
        return {
            contentText: {
                contentdown: '', //查看更多
                contentrefresh: '加载中',
                contentnomore: '- 已经到底了 -'
            },
            page: 0
        }
    },
    methods: {
        formatNum(num){
            return num > 999 ? '999+' : num
        },

        // 回复
        /**
         * 
         * @param comment 评论
         * @param parentId 这条评论的上级评论
         * @param topId 这条评论的顶级评论
         */
        async handleReply(comment, parentId, topId){
            // 朋友圈打开
            if(this.scene == 1154) return this.$tip.toast('请前往小程序使用完整服务')
            let users = uni.getStorageSync('login_user_info') || {}
            let userId = ''
            if(Object.keys(users).length){
                userId = users.userId
            }else {
                try {
                    const {data: {userId: id = ''} = {}} = await this.$store.dispatch('GetUserInfo')
                    userId = id
                } catch (error) {
                    console.log(error, 'err')
                }
            }
            if(userId === comment.createBy){
                this.$emit('reply-pop', {id: comment.id, parentId, topId})
            }else {
                this.$emit('to-reply',{parentId, topId})

            }
        },
        
        // 点赞
        handleStar(data){
            // 朋友圈打开
            if(this.scene == 1154) return this.$tip.toast('请前往小程序使用完整服务')
            apiLike({ 
                type: 4,
                targetId: data.id,
                isLike: data.isLike ? 0 : 1
             }).then(res => {
                if(res.code == 200){
                    data.isLike = !data.isLike
                    if(data.isLike){
                        data.likes+=1
                        this.$tip.toast('点赞成功')
                    }else {
                        data.likes-=1
                        // this.$tip.toast('取消点赞成功')
                    }
                }
            }).catch(err => {
                console.log(err, 'err')
            })
        },

        // 更多回复
        loadMoreReply(comment){
            apiListSubComment({ 
                topId: comment.id,
                pageNum: ++this.page
             }).then(res => {
                if(res.code == 200){
                    comment.child = [...comment.child, ...res.data.rows || []]
                    comment.haveMore = this.page * 5 <= res.data.total
                }
            }).catch(err => {
                console.log(err, 'err')
            })
        }
    },

}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@function toRem($rpx){  //$rpx为需要转换的字号
    @return #{$rpx * 100 / 750 / 4}rem; 
}
.comment-warp{
    width: 100%;
    background-color: #fff;
    border-radius: toRem(10);
    padding: toRem(30) toRem(20);
    box-sizing: border-box;
    position: relative;
    .header{
        margin-bottom: toRem(30);
        color: #333;
        font-size: toRem(28);
    }
    .comment,.reply{
        display: flex;
        width: 100%;
        align-items: flex-start;
        margin-bottom: toRem(38);
        .avatar{
            width: toRem(70);
            height: toRem(70);
            border-radius: 50%;
        }
        .default{
            background-color: #EAEEF6;
            position: relative;
            
        }
        .icon-avatar{
            width: toRem(29);
            height: toRem(33);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .right-info{
            margin-left: toRem(20);
            flex: 1;
            border-bottom: toRem(1) solid #F5F5F5;
            padding-bottom: toRem(35);
            .main{
                display: flex;
                align-items: flex-start;
                .user-content{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    flex: 1;
                }
                .user{
                    display: inline-flex;
                    align-items: center;
                    color: #999;
                    font-size: toRem(24);
                    .top{
                        color: #F57878;
                        font-size: toRem(20);
                        padding: toRem(5) toRem(10);
                        background-color: #FFF4F4;
                        border: 1rpx solid #F8CBCB;
                        margin-left: toRem(19);
                        border-radius: toRem(8);
                    }
                }
                .content{
                    color: #333;
                    font-size: toRem(28);
                    margin-top: toRem(19);
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    line-height: toRem(40);
                    .text{
                        margin-right: toRem(20);
                        line-height: toRem(36);
                    }
                    .time{
                        color: #999;
                        font-size: toRem(24);
                    }
                    .reply-btn{
                        color: #666;
                        margin-left: toRem(20);
                    }
                }
            }
            .star{
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                color: #999;
                font-size: toRem(24);
                margin-left: toRem(30);
                .icon{
                    width: toRem(28);
                    height: toRem(27);
                    margin-bottom: toRem(10);
                }
            }
        }
    }
    .reply{
        margin-top: toRem(30);
        margin-bottom: 0;
        padding-bottom: 0;
        .right-info{
            padding-bottom: 0;
            border: none;
        }
        .avatar{
            width: toRem(39);
            height: toRem(39);
            .icon-avatar{
                width: toRem(16);
                height: toRem(18);
            }
        }
        .to-name{
            color: #999;
            margin: 0 toRem(15);
        }
    }
    .reply-list .load-more{
        color: #F57878;
        font-size: toRem(28);
        margin-top: toRem(30);
        padding-left: toRem(59);
        box-sizing: border-box;
    }
    .empty{
        min-height: toRem(290);
    }
}
 
</style>
